<template>
  <div class="container">
    <el-row>
      <el-col :span="24">
        <div class="table-container">
          <el-table :data="tableData" style="width: 100%;">

            <el-table-column prop="createTime" label="日期" width="100"></el-table-column>
            <el-table-column prop="size1" label="异常单数量" width="100"></el-table-column>
            <el-table-column prop="size2" label="正常数量" width="100"></el-table-column>
            <el-table-column prop="yichanglv" label="异常率" width="150"></el-table-column>

          </el-table>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <!-- 分页部分 -->
        <div class="pagination-container">
          <el-pagination background :page-sizes="[5, 10, 20, 50]" :page-size="pageSize" :current-page="pageNum"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @prev-click="prePage" @next-click="nextPage"
            @current-change="curPage" @size-change="sizeChange">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageSize: 10,
      pageNum: 1,
      total: 0,
      tableData: [], // 表格对象
      param: {}, // 查询参数对象
    };
  },

  methods: {
    queryAll() {
      let pageParam = {};
      pageParam.pageNum = this.pageNum;
      pageParam.pageSize = this.pageSize;
      pageParam.param = this.param;
      this.$axios.post("api/exception/queryExceptionT", pageParam).then((resp) => {
        console.log(resp.data);
        if (resp.data.code == 200) {
          this.tableData = resp.data.data.list;
          this.total = resp.data.data.total;
        }
      });
    },

    // 点击上一页
    prePage() {
      if (this.pageNum > 1) {
        this.pageNum--;
        this.queryAll(); // 更新数据
      }
    },

    // 点击下一页
    nextPage() {
      if (this.pageNum < Math.ceil(this.total / this.pageSize)) {
        this.pageNum++;
        this.queryAll(); // 更新数据
      }
    },

    // 页码变化
    curPage(pageNum) {
      this.pageNum = pageNum;
      this.queryAll(); // 更新数据
    },

    // 每页显示条数变化
    sizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageNum = 1; // 每页条数变化时，回到第一页
      this.queryAll(); // 更新数据
    },
  },

  created() {
    this.queryAll();
  },
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.table-container {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.el-table {
  border-radius: 8px;
  overflow: hidden;
}

.el-table th,
.el-table td {
  text-align: center;
  padding: 12px;
}

.el-table th {
  background-color: #f3f3f3;
  font-weight: bold;
  color: #333;
}

.el-table__body-wrapper {
  background-color: #fff;
}

.pagination-container {
  margin-top: 20px;
  text-align: center;
}

.el-pagination {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  background-color: #f9f9f9;
  padding: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
</style>
